<?php echo $header; ?>
<div id="content">
  <div class="breadcrumb">
    <?php foreach ($breadcrumbs as $breadcrumb) { ?>
    <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
    <?php } ?>
  </div>
  <?php if ($error_warning) { ?>
  <div class="warning"><?php echo $error_warning; ?></div>
  <?php } ?>
<?php echo $shortcut_route;?> 
  <div class="box">
    <div class="heading">
      <h1><img src="view/image/module.png" alt="" /> <?php echo $heading_title; ?></h1>
     
    </div>
    <div class="content">
    <?php echo $shortcut_module;?> 
      
      <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form">
        
        <h2><?php echo $text_featured_article;?></h2>    
            <table class="form">
              <tr>
                <td style="padding: 0;" colspan="2">
                <select id="category" style="margin-bottom: 5px;" onchange="getArticles();">
                  <?php foreach ($categories as $category) { ?>
                  <option value="<?php echo $category['article_category_id']; ?>"><?php echo $category['name']; ?> <?php echo $category['total']; ?></option>
                  <?php } ?>
                </select></td>
                <td class="left"><?php echo $text_featured_article;?> :</td>
              </tr>
              <tr>
                <td style="padding: 0;"><select multiple="multiple" id="article" size="10" style="width: 350px;">
                  </select></td>
                  <td style="vertical-align: middle;"><input type="button" value="--&gt;" onclick="addFeatured();" />
                  <br />
                  <input type="button" value="&lt;--" onclick="removeFeatured();" /></td>
                  <td style="padding: 0;"><select multiple="multiple" id="featured" size="10" style="width: 350px;">
                </select></td>
              </tr>
            </table>
            <div id="featured_article">
            <?php if($featured_article){?>
              <?php foreach ($featured_article as $featured_id) { ?>
              <input type="hidden" name="featured_article[]" value="<?php echo $featured_id; ?>" />
              <?php } ?>
               <?php } ?>
            </div>
        <table id="module" class="list">
          <thead>
            <tr>
              <td class="left"><?php echo $entry_layout; ?></td>
              <td class="left"><?php echo $entry_article_type; ?></td>
              <td class="left"><?php echo $entry_article_limit; ?></td>
              <td class="left"><?php echo $entry_description_limit; ?></td>
              <td class="left"><?php echo $entry_image; ?></td>
              <td class="left"><?php echo $entry_position; ?></td>
              <td class="left"><?php echo $entry_status; ?></td>

                            <td class="left">Mobile <?php echo $entry_position; ?></td>
                            <td class="left">Mobile <?php echo $entry_status; ?></td>
                            <td class="left">Tablet <?php echo $entry_position; ?></td>
                            <td class="left">Tablet <?php echo $entry_status; ?></td>
            
              <td class="right"><?php echo $entry_sort_order; ?></td>
              <td class="right"> <div class="buttons"><a onclick="$('#form').submit();" class="button"><span><?php echo $button_save; ?></span></a><a onclick="location = '<?php echo $cancel; ?>';" class="button"><span><?php echo $button_cancel; ?></span></a></div></td>
            </tr>
          </thead>
          <?php $module_row = 0; ?>
          <?php foreach ($modules as $module) { ?>
          <tbody id="module-row<?php echo $module_row; ?>">
            <tr>
              <td class="left"><select name="article_by_type_module[<?php echo $module_row; ?>][layout_id]">
                  <?php foreach ($layouts as $layout) { ?>
                  <?php if ($layout['layout_id'] == $module['layout_id']) { ?>
                  <option value="<?php echo $layout['layout_id']; ?>" selected="selected"><?php echo $layout['name']; ?></option>
                  <?php } else { ?>
                  <option value="<?php echo $layout['layout_id']; ?>"><?php echo $layout['name']; ?></option>
                  <?php } ?>
                  <?php } ?>
                </select></td>
                <td class="left"><select name="article_by_type_module[<?php echo $module_row; ?>][article_type]">
                  <?php if ($module['article_type'] == 'recent_article') { ?>
                  <option value="recent_article" selected="selected"><?php echo $text_recent_article; ?></option>
                  <?php } else { ?>
                  <option value="recent_article"><?php echo $text_recent_article; ?></option>
                  <?php } ?>
                  <?php if ($module['article_type'] == 'featured_article') { ?>
                  <option value="featured_article" selected="selected"><?php echo $text_featured_article; ?></option>
                  <?php } else { ?>
                  <option value="featured_article"><?php echo $text_featured_article; ?></option>
                  <?php } ?>
                  <?php if ($module['article_type'] == 'most_viewed') { ?>
                  <option value="most_viewed" selected="selected"><?php echo $text_most_viewed; ?></option>
                  <?php } else { ?>
                  <option value="most_viewed"><?php echo $text_most_viewed; ?></option>
                  <?php } ?>
                </select></td>
              <td class="left"><input type="text" name="article_by_type_module[<?php echo $module_row; ?>][limit]" value="<?php echo $module['limit']; ?>" size="1" /></td>
              <td class="left">
              <input type="text" name="article_by_type_module[<?php echo $module_row; ?>][description_limit]" id="description_limit<?php echo $module_row; ?>" value="<?php echo $module['description_limit']; ?>" size="1" /></td>
              <td class="left">
              <input type="text" name="article_by_type_module[<?php echo $module_row; ?>][image_width]"  id="image_width<?php echo $module_row; ?>" value="<?php echo $module['image_width']; ?>" size="3" />
                <input type="text" name="article_by_type_module[<?php echo $module_row; ?>][image_height]" id="image_height<?php echo $module_row; ?>" value="<?php echo $module['image_height']; ?>" size="3" />
                <?php if (isset($error_image[$module_row])) { ?>
                <span class="error"><?php echo $error_image[$module_row]; ?></span>
                <?php } ?></td>
              <td class="left"><select name="article_by_type_module[<?php echo $module_row; ?>][position]"  onchange="image_size(<?php echo $module_row; ?>,this.value)">   
                  <?php if ($module['position'] == 'content_top') { ?>
                  <option value="content_top" selected="selected"><?php echo $text_content_top; ?></option>
                  <?php } else { ?>
                  <option value="content_top"><?php echo $text_content_top; ?></option>
                  <?php } ?>
                  <?php if ($module['position'] == 'content_bottom') { ?>
                  <option value="content_bottom" selected="selected"><?php echo $text_content_bottom; ?></option>
                  <?php } else { ?>
                  <option value="content_bottom"><?php echo $text_content_bottom; ?></option>
                  <?php } ?>
                  <?php if ($module['position'] == 'column_left') { ?>
                  <option value="column_left" selected="selected"><?php echo $text_column_left; ?></option>
                  <?php } else { ?>
                  <option value="column_left"><?php echo $text_column_left; ?></option>
                  <?php } ?>
                  <?php if ($module['position'] == 'column_right') { ?>
                  <option value="column_right" selected="selected"><?php echo $text_column_right; ?></option>
                  <?php } else { ?>
                  <option value="column_right"><?php echo $text_column_right; ?></option>
                  <?php } ?>
                </select></td>
              <td class="left"><select name="article_by_type_module[<?php echo $module_row; ?>][status]">
                  <?php if ($module['status']) { ?>
                  <option value="1" selected="selected"><?php echo $text_enabled; ?></option>
                  <option value="0"><?php echo $text_disabled; ?></option>
                  <?php } else { ?>
                  <option value="1"><?php echo $text_enabled; ?></option>
                  <option value="0" selected="selected"><?php echo $text_disabled; ?></option>
                  <?php } ?>
                </select></td>
              <td class="right"><input type="text" name="article_by_type_module[<?php echo $module_row; ?>][sort_order]" value="<?php echo $module['sort_order']; ?>" size="3" /></td>
              <td class="right"><a onclick="$('#module-row<?php echo $module_row; ?>').remove();" class="button"><span><?php echo $button_remove; ?></span></a></td>
            </tr>
          </tbody>
          <?php $module_row++; ?>
          <?php } ?>
          <tfoot>
            <tr>
              <?php
                $source = file_get_contents(__FILE__);
                preg_match_all("'<thead>(.*?)</thead>'si", $source, $thead);
                preg_match_all("'<td class(.*?)</td>'si", $thead[0][0], $tdhead);
                ?>
<td colspan="<?php echo sizeof($tdhead[0]); ?>"></td>
            
              <td class="right"><a onclick="addModule();" class="button"><span><?php echo $button_add_module; ?></span></a></td>
            </tr>
          </tfoot>
        </table>
      </form>
    </div>
  </div>
</div>
<script type="text/javascript"><!--	
function image_size(module_id,position){
var id=module_id;
var pos=position;
	if (pos == 'column_left'||pos == 'column_right') {
		$('#image_width'+id).val(<?php echo $width;?>);
		$('#image_height'+id).val(<?php echo $height;?>);		
		$('#description_limit'+id).val(128);	
	} else{
		$('#image_width'+id).val(200);
		$('#image_height'+id).val(150);	
		$('#description_limit'+id).val(255);		
	}
}
var module_row = <?php echo $module_row; ?>;
function addModule() {	
	html  = '<tbody id="module-row'+module_row + '">';
	html += '  <tr>';	html += '    <td class="left"><select name="article_by_type_module['+module_row + '][layout_id]">';
	<?php foreach ($layouts as $layout) { ?>
	html += '      <option value="<?php echo $layout['layout_id']; ?>"><?php echo addslashes($layout['name']); ?></option>';
	<?php } ?>
	html += '    </select></td>';
	html += '    <td class="left"><select name="article_by_type_module['+module_row + '][article_type]">';
	html += '      <option value="recent_article"><?php echo $text_recent_article; ?></option>';
	html += '      <option value="featured_article"><?php echo $text_featured_article; ?></option>';
	html += '      <option value="most_viewed"><?php echo $text_most_viewed; ?></option>';
	html += '    </select></td>';
	html += '    <td class="left"><input type="text" name="article_by_type_module['+module_row + '][limit]" value="5" size="1" /></td>';
	html += '    <td class="left"><input type="text" name="article_by_type_module['+module_row + '][description_limit]" id="description_limit'+module_row + '" value="128" size="1" /></td>';
	html += '    <td class="left"><input type="text" name="article_by_type_module['+module_row + '][image_width]" id="image_width'+module_row + '" value="<?php echo $width;?>" size="3" /> ';
	html += '    <input type="text" name="article_by_type_module['+module_row + '][image_height]" id="image_height'+module_row + '" value="<?php echo $height;?>" size="3" /></td>';	
	html += '    <td class="left"><select name="article_by_type_module['+module_row + '][position]" id="position'+module_row+'" onchange="image_size('+module_row+',this.value)">';	
	html += '      <option value="content_top"><?php echo $text_content_top; ?></option>';
	html += '      <option value="content_bottom"><?php echo $text_content_bottom; ?></option>';
	html += '      <option value="column_left"><?php echo $text_column_left; ?></option>';
	html += '      <option value="column_right"><?php echo $text_column_right; ?></option>';
	html += '    </select></td>';
	html += '    <td class="left"><select name="article_by_type_module['+module_row + '][status]">';
    html += '      <option value="1" selected="selected"><?php echo $text_enabled; ?></option>';
    html += '      <option value="0"><?php echo $text_disabled; ?></option>';
    html += '    </select></td>';
	html += '    <td class="right"><input type="text" name="article_by_type_module['+module_row + '][sort_order]" value="99" size="3" /></td>';
	html += '    <td class="right"><a onclick="$(\'#module-row'+module_row + '\').remove();" class="button"><span><?php echo $button_remove; ?></span></a></td>';
	html += '  </tr>';
	html += '</tbody>';
	
	$('#module tfoot').before(html);	
	$('#position'+module_row).bind('change', function() {
				if (this.value == 'column_left'||this.value == 'column_right') {
					$('#image_width'+module_row).val(<?php echo $width;?>);
					$('#image_height'+module_row).val(<?php echo $height;?>);	
					$('#description_limit'+module_row).val(128);		
				}  
				if (this.value == 'content_top'||this.value == 'content_bottom') {			
					$('#image_width'+module_row).val(200);
					$('#image_height'+module_row).val(150);	
					$('#description_limit'+module_row).val(255);	
				}
	});
	$('#position'+module_row).trigger('change');
	module_row++;
}
//--></script> 

<script type="text/javascript"><!--
function addFeatured() {
	$('#article :selected').each(function() {
		$(this).remove();
		
		$('#featured option[value=\'' + $(this).attr('value') + '\']').remove();
		
		$('#featured').append('<option value="' + $(this).attr('value') + '">' + $(this).text() + '</option>');
		
		$('#featured_article input[value=\'' + $(this).attr('value') + '\']').remove();
		
		$('#featured_article').append('<input type="hidden" name="featured_article[]" value="' + $(this).attr('value') + '" />');
	});
}

function removeFeatured() {
	$('#featured :selected').each(function() {
		$(this).remove();
		
		$('#featured_article input[value=\'' + $(this).attr('value') + '\']').remove();
	});
}

function getArticles() {
	$('#article option').remove();
	
	$.ajax({
		url: 'index.php?route=module/article_by_type/category&token=<?php echo $token; ?>&article_category_id=' + $('#category').attr('value'),
		dataType: 'json',
		success: function(data) {
			for (i = 0; i < data.length; i++) {
	 			$('#article').append('<option value="' + data[i]['article_id'] + '">' + data[i]['name'] + '</option>');
			}
		}
	});
}

function getFeatured() {
	$('#featured option').remove();
	
	$.ajax({
		url: 'index.php?route=module/article_by_type/featured&token=<?php echo $token; ?>',
		type: 'POST',
		dataType: 'json',
		data: $('#featured_article input'),
		success: function(data) {
			$('#featured_article input').remove();
			
			for (i = 0; i < data.length; i++) {
	 			$('#featured').append('<option value="' + data[i]['article_id'] + '">' + data[i]['name'] + '</option>');
				
				$('#featured_article').append('<input type="hidden" name="featured_article[]" value="' + data[i]['article_id'] + '" />');
			} 
		}
	});
}

getArticles();
getFeatured();
//--></script>
<?php echo $footer; ?>